import React from 'react';
import {inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {Button, Icon, Row, Col} from 'antd';
import { WeaMaterialLib } from '../../../../pc4backstage/portal4engine/components/common';
import {WeaLocaleProvider, WeaDialog, WeaRightMenu, WeaMoreButton, WeaFormItem, WeaSelect, WeaInput, WeaBrowser, WeaUpload,WeaColorPicker,WeaCheckbox,WeaInputNumber,WeaNewScroll} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import './style/';
class AddCustomApplication extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            application:{
                id : -1,
                text : "",
                logo : "",
                bgc : "#000",
                url :"",
                realUrl:"",
                replaceData : [],
                urlType : "1",
                showNumberUrl: "",
                isOpacityBgc:"0",
                json:{
                    mandatory:'0',
                    width:'',
                    logoTextMarginAfter:'',
                    showTypeAfter:'',
                    noReadTitle:'',
                },
                isAddModule:'0',
            }
        }
    }




    componentWillReceiveProps(nextProps) {
        if(nextProps.arrayId!=-1){

            let data = {};
            for(var key in nextProps.data){
                data[key]=nextProps.data[key];
            }

            if(!data.bgc){
                data = Object.assign(data,{isOpacityBgc:"1"})
            }else{
                data = Object.assign(data,{isOpacityBgc:"0"})
            }
            this.setStateData(data)

        }else{
            this.setStateData({id : -1,
                text : "",
                logo : "",
                bgc : "#000",
                url :"",
                replaceData : [],
                urlType : "1",
                showNumberUrl: "",
                isOpacityBgc:"0",
                json:{
                    mandatory:'0',
                    width:'',
                    logoTextMarginAfter:'',
                    showTypeAfter:'',
                    noReadTitle:'',
                },
                isAddModule:'0',
            })
        }

    }

    setStateData = (stateData)=>{
        let application = Object.assign(this.state.application,stateData);
        this.setState({
            application
        })
    }

    setStateJson = (data)=>{
        this.setStateData({"json": Object.assign({},this.state.application.json,data)})
    }

    handlerMandatory = (value)=>{
        if(value =='1'){
            this.setStateData({"json": Object.assign({},this.state.application.json,{"mandatory":value})})
        }else{
            this.setStateData({"json": Object.assign({},this.state.application.json,{"mandatory":value,'width':'','logoTextMarginAfter':'','showTypeAfter':''})})
        }
    }

    render (){
        let id = this.props.arrayId
        let visible = this.props.addVisiable


            //fromData.url = "/wui/index.html#/main"+fromData.replaceData[0].mobxrouteurl
        const colProps = {
            labelCol: {span: 6},
            wrapperCol: {span: 16}
        };
        const showTypeOptions = [
            {key:'0',showname:'方式1'},
            {key:'1',showname:'方式2'}
        ]


        return  (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@c5wvun`}
                title={`${id != -1 ? getLabel(82178, '编辑应用') : getLabel(387142, '添加应用')}`}
                visible={visible}
                icon='icon-coms-portal'
                iconBgcolor='#1a57a0'
                hasScroll={true}
                style={{width: 700}}
                buttons={this.getButtons()}
                onCancel={() => {this.props.setAddVisiable(false)}}
            >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ctj0do`} datas={this.getRightMenus()}>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@wus0vh`} height={300}>
                    <div className="e9desktop-menu-add">
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ivbze6`} label={getLabel(385808, '菜单地址')} {...colProps}>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@te87zo`} gutter={8}>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ftszpm`} span={8}>
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@i5c8f0`}
                                        value={this.state.application.urlType}
                                        options={[
                                            {key: '1', selected: true, showname: getLabel(33496, '系统菜单')},
                                            {key: '2', selected: false, showname: getLabel(385809, '自定义URL')}
                                        ]}
                                        onChange={value => {this.setStateData({"urlType":value,'url':''});this.setStateJson({replaceData: []})}}
                                    />
                                </Col>
                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@g2lzge`} span={16}>
                                    {this.state.application.urlType == '2' ? (
                                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@62g69e`}
                                            value={this.state.application.url}
                                            viewAttr={3}
                                            onChange={
                                                (value) => {
                                                    let url = value;
                                                    if (value.indexOf('www.') == 0) url = 'http://' + url;
                                                    this.setStateData({"url":url});
                                                }
                                            }
                                            helpfulTip={getLabel('386567', '外部地址，请在地址前加上http://或https://')}
                                        />
                                    ) : (
                                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@w19afp`}
                                            title={getLabel(33496, '系统菜单')}
                                            type={'portalmenu'}
                                            tabs={[
                                                {name: getLabel(33675, '前端菜单'), key: '1', dataParams: {sourcetype: '1'}, conditionDataParams: {sourcetype: '1'}},
                                                {name: getLabel(33676, '后端菜单'), key: '2', dataParams: {sourcetype: '2'}, conditionDataParams: {sourcetype: '2'}},
                                                {name: getLabel(18773, '自定义菜单'), key: '3', dataParams: {sourcetype: '3'}, conditionDataParams: {sourcetype: '3'}},
                                                {name: getLabel(23094, '系统门户页面'), key: '4', dataParams: {sourcetype: '4'}, conditionDataParams: {sourcetype: '4'}}
                                            ]}
                                            viewAttr={3}
                                            replaceDatas={mobx.toJS(this.state.application.json.replaceData)}
                                            onChange={(id, name, data) => {this.setStateData({url:(data.length > 0 ? data[0].fullrouteurl ||data[0].linkAddress ||"":"")});this.setStateJson({replaceData: data})}}
                                        />
                                    )
                                    }
                                </Col>
                            </Row>
                        </WeaFormItem>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@v8jbpz`} label={getLabel(30828, '显示名称')} {...colProps}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@tskd6g`} value={this.state.application.text} viewAttr={3} onChange={value => this.setStateData({"text": value})}/>
                        </WeaFormItem>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dk192c`} label={getLabel(387148, '	未读数接口地址')} {...colProps}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@j06wws`}
                                value={this.state.application.showNumberUrl}
                                onChange={value => this.setStateData({"showNumberUrl": value})}
                                helpfulTip={getLabel(387149, '如需在应用图标上显示未读数，请配置未读数获取接口地址，如不配置则不显示未读数')+"<br/>"+getLabel(520203,"未读数接口请求方式")+": GET"+"<br/>"+getLabel(	520202,"未读数接口返回值格式")+": {unread: 0}"}
                            />
                        </WeaFormItem>
                        {
                            this.state.application.showNumberUrl && this.state.application.showNumberUrl !="" ? (
                                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6owkjg`} label={getLabel(513280, '未读数接口返回值名称')} {...colProps}>
                                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@6s28o0`}
                                        value={this.state.application.json.showNumberUrlResultName}
                                        onChange={value => this.setStateJson({"showNumberUrlResultName": value})}
                                    />
                                </WeaFormItem>
                            ) : null
                        }
                        {
                            ((this.state.application.json.mandatory == '0' && this.props.setting.showType == "1") || (this.state.application.json.mandatory == '1' && this.state.application.json.showTypeAfter=='1')) ? (
                                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cj9i7g`} label={getLabel(511707, '未读提示信息')} {...colProps}>
                                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@7wz455`}
                                        value={this.state.application.json.noReadTitle}
                                        onChange={value => this.setStateData({"json": Object.assign({},this.state.application.json,{"noReadTitle":value})})}
                                    />
                                </WeaFormItem>
                            ): null
                        }

                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2ch71l`} label={getLabel(2077,"背景颜色")} {...colProps}>
                            <span>透明:</span>
                            <div className="lr_addCustomApplication_bgc_div_checkbox" >
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@854y0d`}
                                    value={this.state.application.isOpacityBgc}
                                    onChange={(value) => {
                                        if (value === "1") {
                                            this.setStateData({"isOpacityBgc":"1","bgc":""})

                                        } else {
                                            this.setStateData({"isOpacityBgc":"0",'bgc':'#000000'})
                                        }
                                    }}
                                />
                            </div>
                            {
                                this.state.application.isOpacityBgc == "0"?(  <div className="lr_addCustomApplication_bgc_div_colorPicker" >
                                    <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@mk75pe`}
                                        value={this.state.application.bgc}
                                        onChange={(v)=> this.setStateData({"bgc": v})}
                                    />
                                </div>):""
                            }




                        </WeaFormItem>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@f7147f`} label={getLabel(22969, '图标')} {...colProps} style={{height: '80px', lineHeight: '80px'}}>
                            {
                                this.state.application.logo ? (
                                    <div className="e9desktop-menu-add-img-edit">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@nskdq0`} multiCheck={false} onChange={(value)=>{ this.setStateData({"logo":value})}} type='button' >
                                            <img src={this.state.application.logo} alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150, '更换图标')}/>
                                        </WeaMaterialLib>
                                        <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746, '删除图标')}>
                                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@syf9h5`} type="cross" onClick={() => this.setStateData({"logo": ''})}/>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="e9desktop-menu-add-img-add">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@gdpmxs`} multiCheck={false} onChange={(value)=>{ this.setStateData({"logo":value})}} type='button' >
                                            <div className="e9desktop-menu-add-img-add-icon" title={getLabel(387151, '添加图标')}>
                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@pzegpw`} type="plus"/>
                                            </div>
                                        </WeaMaterialLib>
                                    </div>
                                )
                            }

                        </WeaFormItem>

                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1dinhs`} label={"强制覆盖设置"} {...colProps}>
                            <div style={{display:'inline-block',width:'100px'}}>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@6yothf`}
                                    value={this.state.application.json.mandatory}
                                    display="switch"
                                    id='test'
                                    style={{display: 'inline'}}
                                    onChange={(value)=>{this.handlerMandatory(value)}}
                                />
                            </div>
                            {
                                this.state.application.json.mandatory == '1' ?(
                                    <div style={{display:'inline-block'}}>
                                        <span style={{'margin-right':'10px'}}>组件宽度:</span>
                                        <div style={{display:'inline-block',width:'100px','margin-right':'10px'}}>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@jnwkuu`} value={this.state.application.json.width} viewAttr={2} onChange={value =>this.setStateData({"json": Object.assign({},this.state.application.json,{"width":value})})}/>
                                        </div>
                                        <span style={{'margin-right':'10px',}}>图标名称间距:</span>
                                        <div style={{display:'inline-block',width:'100px','margin-right':'10px'}}>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@t16qba`} value={this.state.application.json.logoTextMarginAfter} viewAttr={2} onChange={value =>this.setStateData({"json": Object.assign({},this.state.application.json,{"logoTextMarginAfter":value})})}/>
                                        </div>
                                        <br/>
                                        <span style={{'margin-right':'10px'}}>显示方式:</span>
                                        <div style={{display:'inline-block',width:"100px",'margin-right':'10px'}}>
                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2z4lr1`}
                                                options={showTypeOptions}
                                                value={this.state.application.json.showTypeAfter}
                                                onChange={value =>this.setStateData({"json": Object.assign({},this.state.application.json,{"showTypeAfter":value})})}
                                            />
                                        </div>
                                    </div>
                                ):(
                                    ""
                                )
                            }
                        </WeaFormItem>

                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@46xd8u`} label={"设置为添加模块"} {...colProps}>
                            <div style={{display:'inline-block',width:'100px'}}>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@f8ig97`}
                                    value={this.state.application.isAddModule}
                                    display="switch"
                                    id='test'
                                    style={{display: 'inline'}}
                                    onChange={(value)=>this.setStateData({'isAddModule':value})}
                                />
                            </div>
                        </WeaFormItem>
                    </div>
                    </WeaNewScroll>
                </WeaRightMenu>
            </WeaDialog>
        )
    }

    getButtons= ()=> {
        let onAddSave = this.props.saveCustomApplication

        let btns = [];
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2avf6u@Submit`} type="primary" onClick={()=>{onAddSave(this.state.application)}}>{getLabel(30986, '保存')}</Button>);
        btns.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@kem1zw@RightMenus`} datas={this.getRightMenus()}/>);
        return btns;
    }
    getRightMenus=()=> {
        let onAddSave = this.props.saveCustomApplication
        let btns = [];
        btns.push({key: '1', icon: <i className="icon-coms-Preservation"/>, content: getLabel(30986, '保存'), onClick: ()=>{onAddSave(this.state.application)}});
        return btns;
    }
}
export default AddCustomApplication